<template>
  <a-card :style="{ marginBottom: '24px' }">
    <div class="flex justify-between">
      <div class="flex">
        <p class="info">贷款统计</p>
        <div class="circles"></div>
        <p style="margin-top:5px">承诺总金额{{ minMoney(total) }}NZD</p>
      </div>
      <div class="flex">
        <a-button :class="{ active: isActive1, cancel: isCancel1 }" @click="year">按年</a-button>
        <a-button :class="{ active: isActive2, cancel: isCancel2 }" @click="month">按月</a-button>
      </div>
    </div>
    <v-chart :forceFit="true" :height="400" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-line position="year*value" />
      <v-point position="year*value" shape="circle" />
    </v-chart>
  </a-card>
</template>
<script>
import { getLineChart } from '@/api/common'
export default {
  name: 'LineChart',
  components: {},
  props: [''],
  data() {
    return {
      data: [],
      scale: [
        {
          dataKey: 'value',
          min: 0
        },
        {
          dataKey: 'year',
          min: 0,
          max: 1
        }
      ],
      total: '',
      isActive1: true,
      isCancel1: false,
      isActive2: false,
      isCancel2: true
    }
  },
  watch: {},
  computed: {},
  methods: {
    minMoney(v) {
      if (v) {
        v = Number(v).toFixed(2)
        return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return ''
      }
    },
    async year() {
      this.data = []
      this.isActive1 = true
      this.isCancel1 = false
      this.isActive2 = false
      this.isCancel2 = true
      const res = await getLineChart({ type: 2 })
      const data = res.result.data
      this.total = data.total
      for (let k in data.loanInfo) {
        this.data.push({
          year: k,
          value: data.loanInfo[k]
        })
      }
      // console.log(this.data)
    },
    async month() {
      this.data = []
      this.isActive1 = false
      this.isCancel1 = true
      this.isActive2 = true
      this.isCancel2 = false
      const res = await getLineChart({ type: 1 })
      const data = res.result.data
      this.total = data.total
      for (let k in data.loanInfo) {
        this.data.push({
          year: k + '月',
          value: data.loanInfo[k]
        })
      }
    }
  },
  created() {},
  mounted() {
    this.year()
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 20px;
}
.circles {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  background-color: #1890ff;
  margin: 10px 5px 0 30px;
  /* margin-top: 10px; */
}
.active {
  background: #1890ff;
  color: white;
  margin: 0 10px;
}
.cancel {
  background: white;
  color: black;
  margin: 0 10px;
}
</style>
